<template> 
	<div class="container">
    <home-header></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icon :iconList="iconList"></home-icon>
    <home-recomend :recommendList="recommendList"></home-recomend>
    <home-weekend :weekendList="weekendList"></home-weekend>

  </div>
</template> 

<script> 
  import HomeHeader from './components/Header'
  import HomeSwiper from './components/Swiper'
  import HomeIcon from './components/Icon'
  import HomeRecomend from './components/HomeRecomend'
  import HomeWeekend from './components/HomeWeekend'
  import axios from 'axios'
  import { mapState } from 'vuex'

  export default { 
    name:"Home",
    components:{
      HomeHeader,
      HomeSwiper,
      HomeIcon,
      HomeRecomend,
      HomeWeekend
    },

    data () { 
      return { 
        lastCity:"",
        swiperList:[],
        iconList:[],
        recommendList:[],
        weekendList:[]
      }; 
    }, 

    methods: { 
      getHomeInfo(){
        axios.get("/api/index.json?city="+this.city)
          .then(this.getHomeInfoSuccess)
      },
      getHomeInfoSuccess(res){
        res=res.data
        if(res.ret && res.data){
          const data=res.data;
          this.swiperList=data.swiperList;
          this.iconList=data.iconList;
          this.recommendList=data.recommendList
          this.weekendList=data.weekendList
        }
      }
    },
    mounted(){
      this.lastCity=this.city
      this.getHomeInfo()
     
    },
    computed:{
      ...mapState(['city'])
    },
    activated(){
      if(this.lastCity !== this.city){
        this.lastCity =this.city
        this.getHomeInfo()
      }
    }


  }; 
</script> 

<style scoped> 

</style> 